<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            text-align: center;
        }
        canvas{
            position: absolute;
            top:0;
            left: 0;
            border: 1px solid;

        }
        img{
            position: absolute;
            top: 0;
            left: 0;

        }
    </style>
</head>
<body>
<img src="img/psb.jpg"height="500" width="500" alt=""/>
<canvas width="500" height="500"></canvas>

<script>
    var cas=document.querySelector("canvas");
    var ctx=cas.getContext("2d");
    var img=document.querySelector("img")
    //将canvas填充
    ctx.fillRect(0,0,500,500)
    //设置橡皮擦
    //鼠标按下并移动时获取坐标值，
    var isClear=false;
    cas.onmousedown=function(e){
        isClear=true;
        ctx.beginPath();

    }
    cas.onmousemove=function(e){
        if(!isClear){
            return
        }
        var x= e.offsetX;
        var y= e.offsetY;
        console.log(x);

        ctx.clearRect(x,y,50,50)

    }
    cas.onmouseup=function(e){
        isClear=false;
    }
    cas.onmouseout=function(e){
        isClear=false;
    }
    setRandom();
    function setRandom(){
        //获取1到3的随机数
        var random=Math.round(Math.random()*2)+1
        img.src="img/"+random+".jpg"
    }



</script>
</body>
</html>